<template>
	<div>
		<van-search v-model="value" show-action label="歌曲" placeholder="请输入搜索关键词" @search="onSearch">
			<template #action>
				<div @click="onSearch">搜索</div>
			</template>
		</van-search>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="(value, index) in bannerImageData" :key="index">
				<img v-lazy="value.pic" />
			</van-swipe-item>
		</van-swipe>
		<h2>推荐新音乐</h2>
		<van-cell v-for="(val,ind) in newsongData" :key="ind" @click="childMethod(val)">
			<span>{{ind+1}}、</span>
			<span>{{val.name}}</span>
			<span style="float: right;" v-if="val.song.artists.length != 1" v-for="(val1,ind1) in val.song.artists"
				:key="ind1">{{val1.name}}、</span>
			<span style="float: right;" v-else>{{val.song.artists[0].name}}</span>
		</van-cell>
	</div>
</template>

<script>
	export default {
		name: 'Sy',
		data() {
			return {
				value: "这世界那么多人",
				//图片轮播数据
				bannerImageData: null,
				//新音乐数据
				newsongData: []
			};
		},
		created() {
			this.getimageData();
			this.getnewsongData();
		},
		methods: {
			//获取图片轮播数据
			async getimageData() {
				let {
					data: ret
				} = await this.$http.get('/banner?type=1')
				this.bannerImageData = ret.banners;
			},
			//获取新音乐数据
			async getnewsongData() {
				let {
					data: ret
				} = await this.$http.get('/personalized/newsong?type=1&limit=9')
				//console.log(ret)
				this.newsongData = ret.result;
			},

			childMethod(val) {
				this.$emit('childMethod', val);
			},
			onSearch() {
				this.$router.push({
					path: "/sylist",
					query: {
						keywords: this.value
					},
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.my-swipe {
		height: 146px;

		.van-swipe-item {
			color: #fff;
			font-size: 20px;
			line-height: 150px;
			text-align: center;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	h2 {
		padding: 10px 16px;
	}
</style>
